<template>
  <view
    :class="
      classNames(
        'cs-block',
        {
          'is-white': !transparent,
        },
        customClass,
      )
    "
  >
    <view class="cs-block__title" v-if="title">{{ title }}</view>
    <view class="cs-block__container" :style="transparent ? '' : style">
      <slot></slot>
    </view>
  </view>
</template>

<script lang="ts" setup>
import classNames from 'classnames'

interface Props {
  customClass?: string
  title?: string
  ver?: number | string
  hor?: number | string
  transparent?: boolean
}

defineOptions({
  name: 'cs-block',
  options: {
    addGlobalClass: true,
    virtualHost: true,
    styleIsolation: 'shared',
  },
})

const props = withDefaults(defineProps<Props>(), {
  ver: 10,
  hor: 15,
  transparent: false,
})

const style = ref<string>('')

watch([() => props.ver, () => props.hor], () => setStyle(), { deep: true, immediate: true })

function setStyle() {
  style.value = `margin: 0 ${props.hor}px;padding:${props.ver}px 0;`
}
</script>

<style lang="scss" scoped>
.cs-block {
  position: relative;
  color: #666;

  &:not(:first-child) {
    margin-top: 15px;
  }

  &:not(:last-child) {
    margin-bottom: 15px;
  }
}

.is-white {
  background: #fff;
}

.cs-block__title {
  padding: 0.3rem 0.5rem;
  font-size: 13px;
}

// .wot-theme-dark {
//   .is-white {
//     background: $-dark-background2;
//   }

//   .cs-block {
//     color: $-dark-color3;
//   }
// }
</style>
